import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'
import Detail from './Detail'

/* 
  路由传参方式
  1. params传参
    路由链接携带参数：<Link to={`/home/message/01`}>消息</Link>
    注册路由接收参数：<Route path="/home/message/:id" component={Detail} />
    接收参数(Detail组件)：const { id } = this.props.match.params
  2. seatch传参
    路由链接携带参数： <Link to={`/home/message/detail?id=${item.id}`}>{item.title}</Link>
    注册路由时无需接收参数：<Route path="/home/message/detail" component={Detail} />
    接收参数(Detail组件)：const search = this.props.location.search
    备注：可以借助querystring解构search  const { id } = qs.parse(this.props.location.search.slice(1))
  3. state传参
    路由链接携带参数： <Link to={{ pathname: '/home/message/detail', state: { id: item.id }}}>{item.title}</Link>
    注册路由时无需接收参数：<Route path="/home/message/detail" component={Detail} />
    接收参数(Detail组件)：const state = this.props.location.state
    备注：刷新可以保留参数
*/
export default class Message extends Component {
  state = {
    messages: [
      { id: '01', title: '消息1' },
      { id: '02', title: '消息2' },
      { id: '03', title: '消息3' }
    ]
  }

  handlePush = (id) => {
    // push -- state参数
    // this.props.history.push('/home/message/detail', { id })
    // push -- params参数
    this.props.history.push(`/home/message/detail/${id}`)
    // push -- search参数
    // this.props.history.push(`/home/message/detail?id=${id}`)
  }

  handleReplace = (id) => {
    // replace -- state参数
    // this.props.history.replace('/home/message/detail', { id })
    // replace -- params参数
    this.props.history.replace(`/home/message/detail/${id}`)
    // replace -- search参数
    // this.props.history.replace(`/home/message/detail?id=${id}`)
  }

  render() {
    return (
      <div>
        <div style={{ borderBottom: '1px solid #eee', lineHeight: '22px' }}>
          {
            this.state.messages.map(item => {
              return (
                <div key={item.id}>
                  {/* 向路由组件传递params参数 */}
                  <Link to={`/home/message/detail/${item.id}`}>{item.title}</Link>
                  {/* 向路由组件传递search参数 */}
                  {/* <Link to={`/home/message/detail?id=${item.id}`}>{item.title}</Link> */}
                  {/* 向路由组件传递state参数 */}
                  {/* <Link to={{ pathname: '/home/message/detail', state: { id: item.id }}}>{item.title}</Link> */}

                  {/* 编程式导航 */}
                  <button onClick={ () => this.handlePush(item.id) }>push</button>
                  <button onClick={ () => this.handleReplace(item.id) }>replace</button>
                </div>
              )
            })
          }
        </div>
        <div>
          {/* 接收路由传递的params参数 */}
          <Route path="/home/message/detail/:id" component={Detail} />
          {/* 接收路由传递的search参数 */}
          {/* <Route path="/home/message/detail" component={Detail} /> */}
          {/* 接收路由传递的state参数 */}
          {/* <Route path="/home/message/detail" component={Detail} /> */}
        </div>
      </div>
    )
  }
}
